<template>
    <div>
        <n-modal v-model:show="showModal" :mask-closable="false" :show-icon="false" preset="dialog" v-bind:on-after-leave="closeModal" transform-origin="center" title="分类管理" :style="{width: dialogWidth}">
            <n-scrollbar style="max-height: 87vh" class="pr-5">
                <n-spin :show="loading" description="请稍候...">
                    <BasicTable ref="actionRef" :columns="cateColumns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :resizeHeightOffset="-10000"  >
                        <template #tableTitle>
                            <n-button type="primary" @click="addCate" class="min-left-space">
                                <template #icon>
                                    <n-icon>
                                        <PlusOutlined />
                                    </n-icon>
                                </template>
                                添加
                            </n-button>
                        </template>
                    </BasicTable>
                </n-spin>
            </n-scrollbar>
        </n-modal>
        <n-modal v-model:show="innerModal" :mask-closable="false" :show-icon="false" preset="dialog" :title="title">
            <n-form ref="formRef" :label-width="100" class="py-4">
                <n-form-item label="名称" path="name">
                    <n-input placeholder="请输入名称" v-model:value="formValue.name" />
                </n-form-item>
                <n-form-item label="排序" path="sort">
                    <n-input-number placeholder="请输入排序" v-model:value="formValue.sort" min="0" />
                </n-form-item>
                <n-form-item label="备注" path="note">
                    <n-input type="textarea" placeholder="备注" v-model:value="formValue.remark" />
                </n-form-item>
            </n-form>
            <template #action>
                <n-space>
                    <n-button @click="innerModal = false">
                        取消
                    </n-button>
                    <n-button type="info" @click="addProductCate">
                        确定
                    </n-button>
                </n-space>
            </template>
        </n-modal>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, h, computed } from 'vue';
import { PlusOutlined } from '@vicons/antd';
import { BasicTable, TableAction } from '@/components/Table';
import { cateColumns } from './model';
import { adaModalWidth } from '@/utils/hotgo';
import { categoryList, addCategory, categoryView, updateStatus } from '@/api/product';
import { useMessage } from 'naive-ui';


const showModal = ref(false);
const innerModal = ref(false);
const loading = ref(false);
const message = useMessage();
const formValue = reactive({
    id: '',
    name: '',
    sort: 1,
    stauts: '',
    remark: ''
})

const title = ref('添加商品分类')
const cateType = ref('add')

const dialogWidth = computed(() => {
  return adaModalWidth(840);
});

const actionColumn = reactive({
    width: 144,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '编辑',
            onClick: handleEdit.bind(null, record),
          },
          {
            label: '禁用',
            onClick: handleStatus.bind(null, record),
            ifShow: () => {
              return record.status === 1;
            },
            type: 'default',
          },
          {
            label: '启用',
            onClick: handleStatus.bind(null, record),
            ifShow: () => {
              return record.status === 2;
            },
            type: 'default',
          }
        ],
      });
    },
  });

// 加载表格数据
const loadDataTable = async () => {
    const params = {
        page:1,
        pageSize:10,
        pagination: true,
        id: '',
        name: '',
        status:''
    }
    return await categoryList({ params });
};
function closeModal() {
//   formValue.value = newState(null);
}

// 打开模态框
function openModal() {
  showModal.value = true;
}

function addProductCate () {
    addCategory(formValue).then(res => {
        message.success('操作成功');
        innerModal.value = false
        loadDataTable();
    }).finally(() => {
        loading.value = false;
    })
}

function handleEdit (row) {
    title.value = '编辑商品分类';
    cateType.value = 'edit';
    categoryView({id: row.id}).then(res => {
        console.log(res, 'reeessss-----');
        innerModal.value = true;
        formValue.id = res.id;
        formValue.name = res.name;
        formValue.stauts = res.status;
        formValue.remark = res.remark;
    }).finally(() => {
        loading.value = false;
    })
}
function handleStatus (row) {
    updateStatus({
        id: row.id,
        status: row.status === 1 ? 2 : 1
    }).then(res => {
        message.success('操作成功');
        loadDataTable();
    }).finally(() => {
        loading.value = false;
    })
}

const addCate = () => {
    innerModal.value = true;
}

defineExpose({
  openModal,
});


</script>

<style lang="less" scoped>

</style> 